<template>
  <el-dialog
    align="left"
    title="分类管理"
    :visible.sync="dialogVisible"
    width="500px">
    <div style="line-height: 40px; text-align: left">请选择一下 <span class="price-font">【一级分类】</span> ，在您的产品中使用:</div>
    <el-select v-if="isInit>0" style="width: 100%" @change="changeSelect" v-model="selectedArr" multiple placeholder="请选择">
      <el-option
        v-for="(item,index) in allArr"
        :key="index"
        :disabled="selectedSourceMap[item.name] && selectedSourceMap[item.name].count>0?true:false"
        :label="item.name+'('+(selectedSourceMap[item.name] && selectedSourceMap[item.name].count>0?selectedSourceMap[item.name].count:0)+')'"
        :value="item.name">
      </el-option>
    </el-select>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ClassifyChangeDialog',
  mounted () {
  },
  data: function () {
    return {
      isInit:-1,
      dialogVisible:false,
      allArr:[],
      selectedArr: [],
      selectedSourceMap: {},
    }
  },
  methods:{
    open:function (selectedArr) {
      let $this=this
      setTimeout(function () {
        $this.getAllArr(function () {
          var arr=[]
          selectedArr.forEach(function (item,index) {
            $this.selectedSourceMap[item.name]=item
            arr.push(item.name)
          })
          $this.selectedArr=arr
          $this.isInit=1
          $this.dialogVisible=true
        })
      },500)
    },
    getAllArr:function (callback) {
      let $this=this
      $this.loading=true
      $this.MyRequest($this.ApiDoNameShop + 'Product/getRootClassifyList', {}, function (data) {
        $this.allArr = data
        console.log('$this.allArr',$this.allArr)
        callback()
        $this.loading=false
        $this.$forceUpdate()
      },function (response) {
        $this.$message.error(response.message)
        $this.loading=false
      })
    },
    confirm:function () {
      let $this=this
      var submitItemArr=[]
      $this.allArr.forEach(function (item,index) {
        if ($this.selectedArr.indexOf(item.name)>-1){
          submitItemArr.push({
            id:item.id,
            name:item.name,
          })
        }
      })
      $this.MyRequest($this.ApiDoNameShop + 'Home/updateClassify', {updateClassify:JSON.stringify(submitItemArr)}, function (data) {
        $this.dialogVisible=false
        $this.$message.success('更新成功')
        setTimeout(function () {
          location.reload()
        },1500)
        $this.$forceUpdate()
      },function (response) {
        $this.$message.error(response.message)
      })
    },
    changeSelect:function () {
      let $this=this
      var keyArr = Object.keys($this.selectedSourceMap)
      var deleteNameArr=[]
      keyArr.forEach(function (name, index) {
        var map=$this.selectedSourceMap[name]
        if (map.count>0 && $this.selectedArr.indexOf(name)===-1){
          $this.$message.error('已添加商品分类不允许【删除】')
          deleteNameArr.push(name)
        }
      })
      setTimeout(function () {
        $this.selectedArr=$this.selectedArr.concat(deleteNameArr)
      },500)
      console.log('deleteNameArr',deleteNameArr)
    }
  }
}
</script>

<style scoped>

</style>
